<template>
    <div style="display: flex">
        <LeftPBITreeSide @change="selectNodeChange" @updateWidth="updateWidth" v-if="$store.getters.userInfo.employeeDTO.isShowSideTree" />
        <div :style="{ width: `calc(100% - ${leftWidth})`, flex: 1 }">
            <RightSideInfo ref="RightSideInfoRef" />
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import LeftPBITreeSide from '@/components/Content/LeftPBITreeSide.vue';
import RightSideInfo from './RightSideInfo.vue';
import { defineComponent, ref, unref, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
    components: {
        LeftPBITreeSide,
        RightSideInfo
    },
    setup() {
        const RightSideInfoRef = ref<any>();
        const state = reactive<any>({
            leftWidth: '290px'
        });
        const updateWidth = (val) => {
            state.leftWidth = val;
        };
        const selectNodeChange = (node) => {
            unref(RightSideInfoRef).sysSetChange(node ? node.catalogCode : null, {}, node ? node.catalogType : null);
        };
        const init = () => {
            if (store.getters.userInfo.employeeDTO.isShowSideTree) {
                unref(RightSideInfoRef).sysSetChange();
            }
        };
        onMounted(() => {
            init();
        });

        return {
            ...toRefs(state),
            updateWidth,
            selectNodeChange,
            RightSideInfoRef
        };
    }
});
</script>

<style scoped lang="less">
.left-tree-wrap {
    flex-shrink: 0;
    padding: 12px;
    background: #fff;
    position: relative;
    border-right: 1px solid rgb(231, 231, 231);
    .tag0 {
        background: rgba(35, 89, 221, 0.12);
        border-color: rgba(35, 89, 221, 0.12);
        color: #2359dd;
    }
    .tag1 {
        background: rgba(95, 191, 168, 0.14);
        border-color: rgba(95, 191, 168, 0.14);
        color: #5fbea8;
    }
    .tag2 {
        background: #edeff3;
        border-color: #edeff3;
        color: rgba(23, 35, 61, 0.65);
    }
    /* 拖动条 */
    .moveBtn {
        height: 100%;
        width: 6px;
        /* opacity: 0; */
        position: absolute;
        right: 0px;
        top: 0;
        cursor: col-resize;
    }
}
</style>